/**
 * Created by maoli on 16/9/25.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Platform,
    TouchableOpacity,
    BackAndroid,
    Image
} from 'react-native';

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');

var MLNavigatorBar = React.createClass({

    //组件挂载的时候调用
    componentDidMount(){
        BackAndroid.addEventListener('hardwareBackPress',function(){
            this.props.backFunc();
            this.props.rightFunc();
        })
    },
    getDefaultProps(){
        return {
            title:"",
            isBack:true,
            backFunc: Component.func,
            rightFunc: Component.func,
            rightBtnImage:null
        }
    },
    render() {
        if (this.props.isBack == true){
            if (this.props.rightBtnImage == null){
                return (
                    <View>
                        <View style={styles.daohangIOSStyle}/>
                        <View style={styles.daohangStyle}>
                            <TouchableOpacity style={{position:'absolute', left:0, bottom:7}} onPress={this.props.backFunc}>
                                <Image
                                    style={{width: 25, height: 25,left:10, bottom:0}}
                                    source={require('../../images/back1.png')}
                                />
                            </TouchableOpacity>
                            <Text style={{color:'white',fontSize: 16}}>
                                {this.props.title}
                            </Text>
                        </View>
                    </View>
                );
            }else {
                return (
                    <View>
                        <View style={styles.daohangIOSStyle}/>
                        <View style={styles.daohangStyle}>
                            <TouchableOpacity style={{position:'absolute', left:0, bottom:7}} onPress={this.props.backFunc}>
                                <Image
                                    style={{width: 25, height: 25,left:10, bottom:0}}
                                    source={require('../../images/back1.png')}
                                />
                            </TouchableOpacity>
                            <Text style={{color:'white',fontSize: 16}}>
                                {this.props.title}
                            </Text>
                            <TouchableOpacity style={{position:'absolute', right:0, bottom:7}} onPress={this.props.rightFunc}>
                                <Image
                                    style={{width: 25, height: 25,right:10, bottom:0}}
                                    source={this.props.rightBtnImage}
                                />
                            </TouchableOpacity>
                        </View>
                    </View>
                );
            }
        }else{
            if (this.props.rightBtnImage == null) {
                return (
                    <View>
                        <View style={styles.daohangIOSStyle}/>
                        <View style={styles.daohangStyle}>
                            <Text style={{color:'white',fontSize: 16}}>
                                {this.props.title}
                            </Text>
                        </View>
                    </View>
                );
            }else {
                return (
                    <View>
                        <View style={styles.daohangIOSStyle}/>
                        <View style={styles.daohangStyle}>
                            <Text style={{color:'white',fontSize: 16}}>
                                {this.props.title}
                            </Text>
                            <TouchableOpacity style={{position:'absolute', right:0, bottom:7}} onPress={this.props.rightFunc}>
                                <Image
                                    style={{width: 25, height: 25,right:10, bottom:0}}
                                    source={this.props.rightBtnImage}
                                />
                            </TouchableOpacity>
                        </View>
                    </View>
                );
            }
        }
    },
});

const styles = StyleSheet.create({
    daohangStyle:{
        // 设置主轴的方向
        flexDirection:'row',
        // 垂直居中 ---> 设置侧轴的对齐方式
        alignItems:'center',
        // 设置主轴的对齐方式
        justifyContent:'space-around',

        width:width,
        height:44,
        backgroundColor:'rgba(0,166,116,1.0)',
    },
    daohangIOSStyle:{
        width:width,
        height:Platform.OS == 'ios' ? 20 : 0,
        backgroundColor:'rgba(0,166,116,1.0)',
    },
});

// 输出组件类
module.exports = MLNavigatorBar;